<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐播放页面</title>
		<style type="text/css">
			*{margin:0; padding:0;}
/*整体控制音乐播放界面*/
			#box-video
				{
				width:100%; 
				height:100%;
				position:absolute; 
				overflow:hidden;
				}
/*插入视频*/	
			#box-video video
				{
				position:absolute; 
				top:50%; 
				left:50%;
				margin-left:-1350px; 
				margin-top:-540px;
				}
/*唱片部分*/	
			.cd
				{
				width:422px;
				height:422px;
				position:absolute;
				top:25%;
				left:10%;
				z-index:2;
				border-radius:50%;
				border:10px solid #FFF;
				box-shadow:5px 5px 15px #000;
				background:url(images/cd_img.jpg) no-repeat;
				}
			.center
			{
			width:100px;
			height:100px;
			background-color:#000;
			border-radius:50%;
			position:absolute;
			top:50%;
			left:50%;
			margin-left:-50px; 
			margin-top:-50px;
			z-index:3;
			border:5px solid #FFF;
			background-image:url(images/yinfu.gif);
			background-position: center center;
			background-repeat:no-repeat;
			}
/*歌词部分*/	
			.song{
				position:absolute;
				top:25%;
				left:50%;
				}
			@font-face{
				font-family:MD; 
				src:url(font/MD.ttf);
				}
			h2{
				font-family:MD; 
				font-size:110px; 
				color:#913805;
				}
			p{ 
			width:556px;
			height:300px;
			font-family:"微软雅黑";
			padding-left:30px;
			line-height:30px;
			background:url(images/bg.png) repeat-x;
			
			}
		</style>
	</head>
	<body>
		<div id="box-video">
        	<video src="video/mailang.webm"  autoplay="autoplay" loop >浏览器不支持video标签</video>
       		<div class="cd">
        		<div class="center"></div>
        	</div>
        	<div class="song">
        		<h2>风中的麦浪</h2>
            	<p>爱过的地方<br/>当微风带着收获的味道<br/>吹向我脸庞<br/>想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯…啦…嗯…啦…<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p>
            	<audio src="music/mailang.mp3" autoplay="autoplay" loop ></audio>
        	</div>
		</div>
	</body>
</html>








